<template>
  <div style="height: 6vh;background-color: #fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px">排片详情</span>
    <el-button type="primary" style="float: right;margin-top: 10px;" @click="scheduling">返回排片</el-button>
  </div>
  <!-- 门店搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="选择排片电影">
            <el-select placeholder="请选择电影" v-model="searchForm.movieId">
              <el-option v-for="item in searchScheduling" :label="item.movieName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary"  @click="loadSchedulingInformation">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!--  门店列表卡片-->
  <el-card style="margin: 20px;">
    <el-table :data="schedulingInformationList">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="hallId" label="影厅ID"></el-table-column>
      <el-table-column align="center" prop="name" label="影厅名称"></el-table-column>
      <el-table-column align="center" prop="boxOfficeRevenues" label="票房收入"></el-table-column>
      <el-table-column align="center" prop="weekRate" label="1周排片率"></el-table-column>
      <el-table-column align="center" prop="weekCount" label="1周内已排场次"></el-table-column>
    </el-table>
  </el-card>

  <!-- 添加饼图卡片 -->
  <el-card style="margin: 20px;">
    <div id="pieChart" style="width: 600px;height:400px;"></div>
  </el-card>
</template>

<script setup>

import {onMounted, ref, nextTick} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import * as echarts from 'echarts'

const router = useRouter()

//一进页面就加载
onMounted(async () =>{
  await cinemaId();
  await loadSchedulingInformation();
  await loadcinema();
})

//定义保存搜索框条件
let searchForm = ref({
  cinemaId: '',
  movieId: 1
})
// 定义变量保存查询出来的的影院数据
let schedulingInformationList = ref([])
// 定义加载影院数据的方法
const loadSchedulingInformation = () =>{
  let data = qs.stringify(searchForm.value);
  console.log('data的数据=' + data)
  axios.get(BASE_URL+'/v1/scheduling/selectByMovieId?'+data).then((response)=>{
    if (response.data.code == 2000){
      schedulingInformationList.value = response.data.data;
      // 数据加载完成后初始化饼图
      nextTick(() => {
        initPieChart()
      })
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 定义保存查出来的电影名和id
let searchScheduling = ref([])
//定义查询影片的方法
const loadcinema=()=>{
  axios.get(BASE_URL+'/v1/movie/select?').then((response)=>{
    if (response.data.code == 2000){
      searchScheduling.value = response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//页面跳转
const scheduling=()=>{
  router.push('scheduling')
}

//定义重置按钮
const resetSearch=()=>{
  searchForm.value = {
    movieName: '战狼2'
  }
}

// 定义获取当前登录用户的数据
const employeelogin = ref(window.getEmployee());
//定义获取影院id
const cinemaId = async () =>{

  await axios.get(BASE_URL+'/v1/employee/selectById?id='+employeelogin.value.id)
      .then((response)=>{
        if (response.data.code == 2000){
          searchForm.value.cinemaId = response.data.data.cinemaId;
          console.log('cinemasId的数据=' + searchForm.value.cinemaId)
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

// 添加初始化饼图方法
const initPieChart = () => {
  const chartDom = document.getElementById('pieChart');
  const myChart = echarts.init(chartDom);
  
  // 处理数据 - 使用排片率和排片场次
  const pieData = schedulingInformationList.value.map(item => ({
    name: item.name,
    weekRate: parseFloat(item.weekRate),
    weekCount: item.weekCount
  }));

  const option = {
    title: {
      text: '影厅排片统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '一周排片率',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: pieData.map(item => ({
          name: item.name,
          value: item.weekRate
        }))
      },
      {
        name: '一周排片场次',
        type: 'pie',
        radius: ['0%', '30%'],
        label: {
          show: true,
          formatter: '{b}: {c}场'
        },
        data: pieData.map(item => ({
          name: item.name,
          value: item.weekCount
        }))
      }
    ]
  };

  option && myChart.setOption(option);
}

</script>

<style scoped>

</style>